<#include "/common/dialogbox.html">
<@header>
<link rel="stylesheet" href="${ctx}/plugins/bootstrap-fileinput/fileinput.min.css">
</@header>
<@body>
  <div class="x_content">
		<form class="form-horizontal form-label-left" method="post" id="importDeptForm">
     	<div class="form-group">
     		<label class="control-label col-md-2 col-sm-2 col-xs-12">
     			额外参数传递
    			</label>
    			<div class="col-md-9 col-sm-9 col-xs-12">
              		<input type="text" id="searchName" name="searchName" class="form-control" required>
              	</div>
    		</div>
     	<div class="form-group">
			<label class="control-label col-md-2 col-sm-2 col-xs-12">
				选择导入文件
			</label>
			<div class="col-md-9 col-sm-9 col-xs-12">
				<div class="file-loading">
		          <input id="importFile" name="importFile" type="file" required>
		        </div>
		        <div id="kartik-file-errors"></div>
	        </div>
     	</div>
     	<div class="form-group">
     		<label class="control-label col-md-2 col-sm-2 col-xs-12">
    			</label>
    			<div class="col-md-9 col-sm-9 col-xs-12">
              		<button type="button" class="btn btn-info btn-sm" id="export_Template">
              			<i class="fa fa-file-excel-o"></i> 点击下载导入模板
				</button>
              	</div>
    		</div>
	</form>
</div>
</@body>
<@footer>
<script src="${ctx}/plugins/bootstrap-fileinput/fileinput.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	    $("#importFile").fileinput({
	    	language: 'zh',
	        showPreview: false,
	        showUpload: false,
	        uploadAsync: false,
	        maxFileCount : 1,
	        uploadExtraData: uploadExtraData,
	        elErrorContainer: '#kartik-file-errors',
	        allowedFileExtensions: ["xls", "xlsx", "gif"],
	        uploadUrl: '${ctx}/system/dept/importDept',
	    }).on("filebatchuploadsuccess", function(event, data) {
	        if(data.response){
	        	window.parent.refreshTable();
				parent.layer.closeAll('iframe'); // 关闭当前frame
	        }
	    }).on('fileerror', function(event, data, msg) {
	        console.log('文件上传失败！'+msg);
	    });
	});

	function uploadExtraData() {
		return {'extraData':$("#searchName").val()};
	}

	function submitHandler() {
		if ($("#importDeptForm").validate().form()) {
	        $("#importFile").fileinput("upload");
		}
	}
	$('#export_Template').on("click", function() {
		const xhr = new XMLHttpRequest();
		xhr.open("POST","/system/dept/importDeptTemplate");
		xhr.responseType = "blob";
		xhr.send();
		xhr.onload = function() {
		  if (this.status === 200) {
		    const blob = this.response;
		    const src = URL.createObjectURL(blob);
		    const link = document.createElement("a");
		    const filename = '部门导入模板.xlsx';
		    link.download = filename;
		    link.style.display = "none";
		    link.href = src;
		    document.body.appendChild(link);
		    link.click();
		    document.body.removeChild(link);
		  }
		};
	})
</script>
</@footer>
